<template>
  <div class="about" style="height: 100%;background-color: #100c2a;">
    <el-row>
      <el-col :span="12" style="height: 500px">
        <v-chart class="chart" theme="dark" :option="pieOption"/>
      </el-col>
      <el-col :span="12" style="height: 500px">
        <v-chart class="chart" theme="dark" :option="barOption"/>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      pieOption: {
        title: { /* 标题设置 */
          text: '文章分类占比图', /* 设置标题内容 */
          subtext: '实时数据', /* 副标题 */
          left: 'center'/* 标题组件左侧的偏移量，可以设置具体的数字表示具体的px值，也可以是百分比，或者css支持的位置单词 */
        },
        tooltip: { /* 提示框设置 */
          trigger: 'item', /* 触发方式，可选值为axis(一般用在折线图中,表示在坐标轴上触发)和item(一般用在没有坐标的图例中，表示在数据上触发) */
          formatter: '{a}<br/>{b}:{c}({d}%)'/* 格式化输出内容模板：a表示图标名称，b表示触发项的名称，c表述该项的数据值，d表示百分比 */
        },
        legend: { /* 图例设置 */
          orient: 'vertical', /* 设置图例的布局方式，vertical表示垂直，horizontal表示水平方向展示 */
          left: 'left'
        },
        series: [/* 图标设置 */
          {
            name: '文章分类', /* 图标名称，和标题是有区别的 */
            type: 'pie', /* 设置图标类型，可选值很多 */
            radius: '50%', /* 设置半径 */
            data: [
              { name: '武侠', value: 22 },
              { name: '穿越', value: 18 },
              { name: '爱情', value: 6 },
              { name: '搞笑', value: 60 }
            ]
          }
        ]
      },
      barOption: {
        title: {
          text: '博客年度数量总结',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category', /* 类目 */
          data: ['2018', '2019', '2020', '2021']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          type: 'bar',
          data: [22, 20, 33, 7]
        }]
      }
    }
  },
  methods: {
    getEchartsData () {
      this.$http.get('admin/echarts').then(data => {
        let pieCount = 0
        const pieData = data.data.pieData
        const pieArr = []
        for (let i = 0; i < pieData.length; i++) {
          if (i < 6) {
            pieArr.push({ name: pieData[i].categoryName, value: pieData[i].articleCount })
          } else {
            pieCount += pieData[i].articleCount
          }
        }
        if (pieData.length > 6) {
          pieArr.push({ name: '其他', value: pieCount })
          this.pieOption.series[0].data = [...pieArr]
        }

        let barCount = 0
        const barData = data.data.barData
        const barXArr = []
        const barYArr = []

        for (let i = 0; i < barData.length; i++) {
          if (i < 5) {
            barXArr.push(barData[i].year)
            barYArr.push(barData[i].count)
          } else {
            barCount += barData[i].count
          }
        }
        if (barData.length > 5) {
          barXArr.push('其他')
          barYArr.push(barCount)
        }
        this.barOption.xAxis.data = [...barXArr]
        this.barOption.series[0].data = [...barYArr]
      })
    }
  },
  created () {
    this.$nextTick(() => {
      this.getEchartsData()
    })
  }
}
</script>
